<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://yandex.st/jquery/1.7.1/jquery.js"></script>
    <script type="text/javascript" src="http://yandex.st/jquery-ui/1.8.16/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="http://yandex.st/jquery-ui/1.8.15/themes/humanity/jquery.ui.all.min.css" />

    <script type="text/javascript" src="../src/jquery.ui-slider-x.js"></script>
	<link rel="stylesheet" type="text/css" href="../src/jquery.ui-slider-x.css" />

    <script>
/*<![CDATA[*/
jQuery(function($) {
    $('#slider').slider_x({
    	min: 0,
    	max: 1000,
    	value: 175
    });

    $('#slider-range').slider_x({
        range: true,
    	min: 0,
    	max: 1000,
    	values: [ 75, 100 ]
    });

	$('#slider-ticks-20').slider_x({
		tickMarksCount: 20
    });

	$('#slider-vertical').slider_x({
		orientation: 'vertical',
		tickLabelsCount: 5
	});

	$('#slider-vertical-range').slider_x({
		orientation: 'vertical',
		tickLabelsCount: 5,
		range: true,
        min: 0,
        max: 1000,
        values: [ 75, 800 ]
	});

	$('#slider-scale-1').slider_x({
		range: true,
        min: 0,
        max: 1000,
        values: [ 75, 750 ],
		scale: [0, 7, 15, 35, 400, 2000]
	});

	$('#slider-scale-2').slider_x({
		range: true,
        values: [ 75, 750 ],
		scale: [0,100,1000,1500,7500,10000],
		handleInputs: true,
	});
});
/*]]>*/
    </script>
</head>
<body>

slider - single

<div id="slider"></div>

slider - range

<div id="slider-range"></div>

slider - ticks

<div id="slider-ticks-20"></div>

slider - vertical

<div id="slider-vertical"></div>

slider - vertical-range

<div id="slider-vertical-range"></div>

slider - scale-1 (0,100,1000)

<div id="slider-scale-1"></div>

slider - scale-2 (0,100,1000,1500,5000,10000)

<div id="slider-scale-2"></div>
</body>
</html>